<template>
  <uni-popup
    ref="popup"
    type="bottom"
    background-color="#fff"
    mask-background-color="rgba(0,0,0,0.2)">
    <view class="popup-coupon">
      <view class="title">
        <text>可用优惠券</text>
        <text class="iconfont icon-close" @tap="close"></text>
      </view>
      <scroll-view
        class="list-wrap"
        :class="{ 'list-height': data.list && data.list.length > 4 }"
        scroll-y="true">
        <view class="item" v-for="(item, index) in data.list" :key="index">
          <CouponItem
            :selectId="data.selectItem.id"
            :page-type="2"
            :coupon-type="2"
            :items="item"
            @select-item="selectItem"></CouponItem>
        </view>
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import CouponItem from '@/components/couponItem/couponItem.vue';

const data = reactive({
  list: [] as any,
  selectItem: {} as any,
});

const popup = ref();
const open = (arr: any) => {
  popup?.value?.open();
  data.list = arr;
};
const close = () => {
  popup?.value?.close();
};

// 点击事件
const emit = defineEmits(['set-item']);
const selectItem = (item: any) => {
  data.selectItem = item;
  emit('set-item', item);
  close();
};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.popup-coupon {
  position: relative;
  top: 12px;
  left: 16px;
  bottom: 20px;
  width: calc(100% - 32px);
  .title {
    display: flex;
    justify-content: space-between;
    line-height: 24px;
    margin-bottom: 24px;
    font-size: 16px;
    color: #000;
  }

  .icon-close {
    font-size: 10px;
    color: #b5b5b5;
  }

  .list-wrap {
    width: 100%;
    margin-bottom: 20px;

    &.list-height {
      height: 50vh;
    }

    .item {
      width: 100%;
      margin-bottom: 12px;
      &.item:last-child {
        margin-bottom: 0px;
      }
    }
  }
}
</style>